{{> account_sidebar}}

<h1>Your profile</h1>

<section id="content" {{#feature request "pro"}}class="pro"{{/feature}}>
  <form class="login" method="post" action="/account/update">
    <p class="loginFeedback"></p>

    <div>
      <label for="name">Username</label>
      <input id="name" name="username" type="text" value="{{user.name}}" disabled>
      {{#if user.pro}}<sup class="pro-badge">Pro</sup>{{/if}}
    </div>

    <div>
      <label for="email">Email</label>
      <input id="email" name="email" type="text" value="{{user.email}}">
    </div>

    <div>
      <label for="key">Password</label>
      <input id="key" name="password" type="password" autocomplete="false">
    </div>

    {{#feature request "api"}}
    <div>
      <label for="api_key"><button id="generate-key">Generate</button> API key</label>
      <span id="api_key">{{user.api_key}}</span>
    </div>
    {{/feature}}

    {{#feature request "sendy"}}
      {{#if request.mailError}}
      <div>
        <label for="subscribed">Email announcements</label>
        <input id="subscribed" name="subscribed" type="checkbox" disabled checked>
        <small>Unable to retrieve subscription status please try again later</small>
      </div>
      {{else}}
      <div>
        <label for="subscribed">Email announcements</label>
        <input id="subscribed" name="subscribed" type="checkbox" {{#if user.subscribed}}checked{{/if}}>
      </div>
      {{/if}}
    {{/feature}}

    <div>
      <label for="beta">Experimental features</label>
      <input id="beta" name="beta" type="checkbox" {{#if user.beta}}checked{{/if}}>
      {{#feature request "!pro"}}
      <a href="/upgrade"><span class="pro-required">Pro</span></a> <a href="/upgrade">account required</a>
      {{/feature}}
      <p><a href="http://jsbin.com/help/experimental-features">Current list of experiments</a> &ndash; <em>Note: not all features make it to production.</em></p>
    </div>

    <input type="hidden" id="_csrf" name="_csrf" value="{{token}}">
    <input type="submit" value="Update account">
  </form>

  <h2>Third party applications</h2>
  <ul>
  {{#feature request "github"}}
    {{#if user.github_token}}
    <li class="link-container success"><strong>Github for logging in</strong> &ndash; complete &#10004; (<a href="/auth/github">re-link</a>)</li>
    {{else}}
    <li class="link-container"><strong>Use Github for logging in</strong> &ndash; <a href="/auth/github">link your Github account</a></li>
    {{/if}}
  {{/feature}}

  {{#feature request "upgrade"}}
  {{#feature request "dropbox"}}
    {{#if user.dropbox_token}}
    <li class="link-container success"><strong>Dropbox automatic exporting</strong> &ndash; complete &#10004; (<a href="{{root}}/auth/dropbox">re-link</a>)</li>
    {{else}}
    <li class="link-container"><strong>Export your bins to Dropbox</strong> &ndash; <a href="{{root}}/auth/dropbox">link your Dropbox account</a></li>
    {{/if}}
  {{else}}
  <li class="link-container"><strong>Export your bins to Dropbox</strong> &ndash; <a href="/upgrade"><span class="pro-required">Pro</span></a> <a href="/upgrade">account required</a></li>
  {{/feature}}
  {{/feature}}
  </ul>
</section>
<link href="{{static}}/css/account-profile.css" rel="stylesheet" type="text/css"/>
<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
<script src="{{static}}/js/account/account-settings.js{{cacheBust}}"></script>
